import {  useRef, useState } from "react";
import styles from './index.less';
import VirtualList from "./VirtualList";
import { Button, Form, Input, Checkbox, Slider, Row } from 'antd';
import img_empty from '@/assets/images/img_empty.png';

type GoodsType = 'type1' | 'type2' | 'type3' | 'type4' | 'type5';

type GoodsItem = {
    id: number;
    type: GoodsType;
    img: string;
};

const SlideMarks = { 100: '100', 140: '140', 180: '180', 220: '220', 260: '260', 300: '300' };

let HeightMap = { 'type1': 100, 'type2': 140, 'type3': 180, 'type4': 220, 'type5': 260 };

const IMGS = [
    'https://zp-zhouxuan.oss-cn-hangzhou.aliyuncs.com/sirius/banner_saas.png',
    'https://zp-zhouxuan.oss-cn-hangzhou.aliyuncs.com/sirius/banner_dian.png',
    'https://zp-zhouxuan.oss-cn-hangzhou.aliyuncs.com/sirius/banner_singer.png',
    'https://zp-zhouxuan.oss-cn-hangzhou.aliyuncs.com/sirius/banner_tms.png',
    'https://zp-zhouxuan.oss-cn-hangzhou.aliyuncs.com/sirius/banner_wms.png',
];

const DefaultConfig = {
    count: 1000000,
    buffer: 10,
    secondBuffer: true,
    header: true,
    footer: true,
    type1: 100,
    type2: 140,
    type3: 180,
    type4: 220,
    type5: 260,
};

export default () => {

    const tempData = useRef<GoodsItem[]>([]);
    const [data, setData] = useState<GoodsItem[]>([]);

    const [form] = Form.useForm();

    const [buffer, setBuffer] = useState<number>(10);
    const [secondBuffer, setSecondBuffer] = useState<boolean>(true);
    const [header, setHeader] = useState<boolean>(true);
    const [footer, setFooter] = useState<boolean>(true);

    const loadData = (value: any) => {
        const t1 = performance.now();
        const {
            count, buffer, secondBuffer, header, footer, type1, type2, type3, type4, type5
        } = value;
        HeightMap = { type1, type2, type3, type4, type5 };

        setBuffer(buffer);
        setSecondBuffer(secondBuffer);
        setHeader(header);
        setFooter(footer);

        const newData: GoodsItem[] = [];
        for (let i = 0; i < count; i++) {
            newData.push({ id: i, type : randomType(), img: IMGS[i % 5] });
        }
        // setData(newData);
        tempData.current = newData;
        const t2 = performance.now();
        console.log(`## 构造数据耗时=${t2 - t1}毫秒`);
    }

    const showList = () => {
        setData(tempData.current);
    }
    
    const reset = () => {

    }

    const renderItem = (item: GoodsItem, index: number, key: string) => {
        return (
            <div key={key} className={styles.item} style={{ minHeight: HeightMap[item.type] }}>
                <img src={item.img} />
                <span>商品名称：{item.id + 1}</span>
            </div>
        );
    }

    const renderSecondBuffer = (item: GoodsItem, index: number, key: string) => {
        return (
            <div key={key} className={styles.item} style={{ minHeight: HeightMap[item.type] }}/>
        );
    }

    const onScrollToBottom = () => {

    }

    const onScrollToTop = () => {
        
    }

    const EmptyView = () => {
        return (
            <div className={styles.emptyLayout}>
                <img src={img_empty} />
                <span>暂无数据</span>
                <span>请在左侧面板配置模拟数据</span>
            </div>
        );
    };

    const Header = () => {
        return (
            <div className={styles.header}>
                <span>自定义头部</span>
                <span>高度固定，或支持渲染前计算</span>
            </div>
        );
    }

    const Footer = () => {
        return (
            <div className={styles.footer}>
                <span>自定义尾部</span>
                <span>如果有margin-top，需要计入高度计算</span>
            </div>
        );
    }

    return (
        <div className={styles.container}>
            <span className={styles.title}>高性能虚拟列表</span>

            <span className={styles.desc}>
                百万级数据毫秒加载，亿级数据两秒加载
            </span>

            <div className={styles.configLayout}>
                <span className={styles.subtitle}>配置面板</span>

                <Form
                    layout={"horizontal"}
                    form={form}
                    initialValues={DefaultConfig}
                    style={{ width: "100%" }}
                    onFinish={(values) => {
                        loadData(values);
                    }}
                >
                    <Form.Item
                        label="数据条数"
                        name="count"
                        valuePropName="value"
                    >
                        <Input type="number" placeholder="范围1 ～ 1亿" />
                    </Form.Item>

                    <Form.Item
                        label="缓冲数量"
                        name="buffer"
                        valuePropName="value"
                    >
                        <Input type="number" placeholder="范围1 ～ 1亿" />
                    </Form.Item>

                    <Row>
                        <Form.Item
                            name="secondBuffer"
                            valuePropName="checked"
                            label={null}
                        >
                            <Checkbox defaultChecked={true}>二级缓冲</Checkbox>
                        </Form.Item>

                        <Form.Item
                            name="header"
                            valuePropName="checked"
                            label={null}
                        >
                            <Checkbox defaultChecked={true}>Header</Checkbox>
                        </Form.Item>

                        <Form.Item
                            name="footer"
                            valuePropName="checked"
                            label={null}
                        >
                            <Checkbox defaultChecked={true}>Footer</Checkbox>
                        </Form.Item>
                    </Row>

                    <p>元素高度</p>
                    <Form.Item label="高度1" name="type1" valuePropName="value">
                        <Slider
                            min={100}
                            max={300}
                            step={20}
                            marks={SlideMarks}
                        />
                    </Form.Item>

                    <Form.Item label="高度2" name="type2" valuePropName="value">
                        <Slider
                            min={100}
                            max={300}
                            step={20}
                            marks={SlideMarks}
                        />
                    </Form.Item>

                    <Form.Item label="高度3" name="type3" valuePropName="value">
                        <Slider
                            min={100}
                            max={300}
                            step={20}
                            marks={SlideMarks}
                        />
                    </Form.Item>

                    <Form.Item label="高度4" name="type4" valuePropName="value">
                        <Slider
                            min={100}
                            max={300}
                            step={20}
                            marks={SlideMarks}
                        />
                    </Form.Item>

                    <Form.Item label="高度5" name="type5" valuePropName="value">
                        <Slider
                            min={100}
                            max={300}
                            step={20}
                            marks={SlideMarks}
                        />
                    </Form.Item>

                    <Row>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                生成数据
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button
                                variant="solid"
                                color="green"
                                htmlType="button"
                                onClick={showList}
                                style={{ marginLeft: 16 }}
                            >
                                加载列表
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button
                                variant="solid"
                                color="orange"
                                htmlType="button"
                                onClick={reset}
                                style={{ marginLeft: 16 }}
                            >
                                重置
                            </Button>
                        </Form.Item>
                    </Row>
                </Form>
            </div>

            <div className={styles.listLayout}>
                <VirtualList
                    data={data}
                    getItemHeight={(item: GoodsItem, index: number) =>
                        HeightMap[item.type]
                    }
                    keyExtractor={(item: GoodsItem, index: number) =>
                        `${item.id}-${index}`
                    }
                    renderItem={renderItem}
                    dividerHeight={10}
                    bufferCount={buffer}
                    renderSecondBuffer={renderSecondBuffer}
                    useSecondBuffer={secondBuffer}
                    onScrollToBottom={onScrollToBottom}
                    onScrollToTop={onScrollToTop}
                    EmptyView={<EmptyView/>}
                    Header={header ? <Header/> : undefined}
                    Footer={footer ? <Footer/> : undefined}
                    headerHeight={100}
                    footerHeight={120}
                />
            </div>
        </div>
    );
}

// 随机类型
const randomType = (): GoodsType => {
    const array: GoodsType[] = ['type1', 'type2', 'type3', 'type4', 'type5'];
    const randomIndex: number = Math.floor(Math.random() * array.length);
    return array[randomIndex];
}